<template>
 <el-row>
      <el-col :lg="{ span: 21,offset:2}" :md="{span: 22}" class="c-container clearfix">
          <div class="content-left">
              <Row class="content_container one-content result" data-scroll-reveal >
                  <div class="post">
                      <div class="post-header">
                          <h2 class="post-title">{{result.title}}</h2>
                          <div class="post-meta">
                              <Icon type="ios-time-outline"></Icon>
                              {{result.create_time}}<span style="padding: 0px 5px;">|</span>
                              <span>{{result.type_name}}</span>
                              <span class="post-see"><Icon type="ios-eye"/>{{result.see==null?0:result.see}}人浏览</span>
                          </div>
                      </div>
                      <div class="post-content" v-html="result.content">
                      </div>
                      <!--底部-->
                      <div class="post-meta">
                          <div>
                              <Icon type="pricetags" class="icon"></Icon>
                              <span class="category-link"><a href="javascript:void(0)" v-if="keyArr.length>0" v-for="item in keyArr" v-html="getKeyHtml(item)" @click="renderArticle(item,getKeyHtml(item))"></a></span>
                          </div>
                          <div>
                              <span v-if="likes" :class="'f_zt likes_'+likes"><Icon type="happy-outline" class=""></Icon>已经点过赞啦！（ {{result.likes==null?0:result.likes}} ）</span>
                              <span :class="'f_zt likes_'+likes" @click="likesThis" v-else><Icon type="happy-outline" class=""></Icon>点赞来一下（ {{result.likes==null?0:result.likes}} ）</span>
                          </div>
                      </div>
                  </div>
              </Row>
             <Row class="two-content result" data-scroll-reveal >

                  <div class="related-article related-article-prev text-truncate" v-if="upAndDown[0]!==undefined">
                      <a @click="renferArticle(upAndDown[0][0])" v-if="upAndDown[0].length>0">
                          <span>上一篇：</span>{{upAndDown[0][0]['title']}}</a>
                  </div>
                  <div class="related-article related-article-prev text-truncate" v-if="upAndDown[1]!==undefined">
                      <a @click="renferArticle(upAndDown[1][0])"  v-if="upAndDown[1].length>0">
                          <span>上一篇：</span>{{upAndDown[1][0]['title']}}</a>
                  </div>

              </Row>
             <Row class="three-content result" data-scroll-reveal>
               <div class="post">
                   <div class="post-header">
                       <h2 class="post-title">
                           留言
                       </h2>
                   </div>
                   <div>
                       <liveMessage @handleSubmit="handleSubmit" :replayForm = "replayForm"></liveMessage>
                   </div>
               </div>
                 <div>
                 </div>
             </Row>
         </div>
             <div class="content-right">
                 <RIGHT></RIGHT>
             </div>
      </el-col>
 </el-row>
</template>
<style scoped src="../../../../static/css/frontend/single/index.css"></style>
<script>
    import scrollReveal from  'scrollreveal'
    import '../../../../static/js/public'
    import Row from "iview/src/components/grid/row";
    import RIGHT from "../right.vue";
    import liveMessage from "../message.vue";
    export default {
        components: {
            Row,
            RIGHT,
            liveMessage
        },
        props:{

        },
        data () {
            return {
                scrollReveal: scrollReveal(),
                row:{
                    page:1,
                    per_page:20
                },
                messageAll:{},
                keyArr:[],
                likes:false,
                result:{},
                allKeys:{},
                upAndDown:{},
                replayForm:{
                    userId:0,
                    username:'',
                    email:'',
                    content:'',
                    item:false

                },
                article:{
                    page:1,
                    per_page:20
                }
            }
        },
        mounted () {
            this.init();
            this.getKeys();
           // this.initArticles();
            this.likesThis();
            this.getMessages();
        },
        methods: {
            init: function () {
                let target = this;
                this.scrollReveal.reveal('.result',target.configScroll);
            },
            getUpAndDown(){
                var that = this;
                that.fetch({
                    url: '/getUpAndDown',
                    method: 'GET',
                    params: {
                       id:that.$route.query.id
                    }
                }).then(function (response) {
                  if(response.data.ret==1){
                      that.upAndDown = response.data.rows;
                  }
                });
            },
            likesThis(){
                var that = this;
                that.fetch({
                    url: '/likesThis',
                    method: 'GET',
                    params: {
                        id:that.$route.query.id
                    }
                }).then(function (response) {
                    if(response.data.ret==1){
                      if(response.data.type==1){
                          that.likes = true;
                          that.initArticles();
                      }else{
                          that.likes = true;
                          that.initArticles();
                      }
                    }

                });
            },
            renferArticle(item){
                console.log(item,45);
                this.$router.push({path:'/article?id='+item.id});
                this.initArticles();
            },
            getKeys(){
                var that = this;
                that.fetch({
                    url: '/backGets',
                    method: 'GET',
                    params: {
                        type:2
                    }
                }).then(function (response) {
                    that.allKeys = response.data.rows;
                });
            },
            translateKey(key){
                var that = this;
                  if(key!=undefined) {
                      var keyArr = key.split(',');
                      that.keyArr = keyArr;

                  }
            },
            renderArticle(key,name){
                console.log(key,name);
                this.$router.push({path:'/link?id='+key+'&name='+name});
            },
            getKeyHtml(key){
              var that =  this;
              for(var i in that.allKeys){
                  if(that.allKeys[i]['id']==key){
                      return that.allKeys[i]['value'];
                  }
              }
            },
            initLikes(){

            },
            initArticles(){
                var that = this;
                that.fetch({
                    url: '/getArticles',
                    method: 'GET',
                    params: {
                        id:that.$route.query.id,
                        type:2
                    }
                }).then(function (response) {
                    that.result = response.data.rows[0];
                    var data = new Date(that.result['create_time']);
                    that.translateKey(that.result.key);
                    that.result['create_time'] = data.toLocaleString('chinese', {hour12: false});
                    that.getUpAndDown();
                    //that.likesThis();
                });
            },
            handleSubmit(form){
                form.article_id =this.$route.query.id;
                let that = this;
                that.fetch({
                    url: '/postArticleMessage',
                    method: 'POST',
                    data:form
                }).then(function (response) {
                    if(response.data.ret==1){
                        that.$Message.success('留言成功');
                       that.replayForm.content=='';
                       that.replayForm.item = true;
                    }
                })
            },
            getMessages(){
                let that = this;
                that.fetch({
                    url:'/getArticleMessage',
                    params:{
                        id:that.$route.query.id,
                        page:that.article.page,
                        per_page:that.article.per_page
                    },
                    method:'GET',
                }).then(function(response){
                      if(response.data.ret==1){
                          that.messageAll =response.data.rows;
                          if(response.data.user.length>0){
                              that.replayForm.username = response.data.user[0].username;
                              that.replayForm.email = response.data.user[0].email;
                              that.replayForm.userId = response.data.user[0].id;
                              that.replayForm.item = true;
                          }
                      }
                });
            }
    }
    }
</script>
